<template>
  <el-container class="exchange">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: getList1}" print>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" @click="openDialog('', false)">新增设备</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          row-key
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"
          width
          max-height="500"
          row-id="id"
          highlight-current-row
          text-algin="center"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column
            type="seq"
            width="50"
            align="center"
          />
          <vxe-table-column
            field="name"
            width="200"
            align="left"
            title="设备名称"
          />
          <vxe-table-column
            field="brandCodeName"
            width="180"
            align="center"
            title="设备品牌"
          />
          <vxe-table-column
            field="modelCodeName"
            width="120"
            align="center"
            title="设备型号"
          />
          <vxe-table-column
            field="printWidthDesc"
            width="120"
            align="center"
            title="打印纸宽度"
          />
          <vxe-table-column
            field="connectionTypeDesc"
            width="100"
            align="center"
            title="网络连接"
          />
          <vxe-table-column
            field="printModeDesc"
            width="100"
            align="center"
            title="打印方式"
          />
          <vxe-table-column
            field="withCutDesc"
            width="100"
            align="center"
            title="是否可切纸"
          />
          <vxe-table-column
            show-overflow
            title="备注"
            field="remark"
            align="left"
            min-width="250"
          />
            <vxe-table-column
              title="状态"
              width="80"
              align="center"
              slots="default"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.publishStatus"
                  :inactive-value="0"
                  :active-value="1"
                  active-text
                  inactive-text
                  @change="changeState(scope)"
                />
              </template>
            </vxe-table-column>
          <vxe-table-column
            title="操作"
            fixed="right"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <div class="drag-btn">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, true)"
                >查看</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, false)"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="delClick(scope.row.id)"
                >删除</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
      <el-dialog :close-on-click-modal="false" :modal="false" :visible.sync="dialogVisible" title="硬件设备信息编辑">
        <el-form ref="ruleForm" :model="params" label-width="7rem" :rules="rules">
          <el-row :gutter="40">
            <el-col :span="24">
              <el-form-item label="设备名称：" prop="name">
                <el-input v-model="params.name" :disabled="disabledEdit"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备品牌：" prop="brandCode">
                <el-select v-model="params.brandCode" class="form-item-input"  @change="getHardwareBrandsModeList" :disabled="disabledEdit">
                  <el-option v-for="item in brandsTypeList" :key="item.brandCode" :value="item.brandCode" :label="item.brandName" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备型号：" prop="modelCode">
                <el-select class="form-item-input" v-model="params.modelCode" :disabled="disabledEdit">
                  <el-option v-for="item in brandModeList" :key="item.modelCode" :value="item.modelCode" :label="item.modelName" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型：" prop="type">
                <el-select class="form-item-input" v-model="params.type" :disabled="disabledEdit">
                  <el-option v-for="item in printerTypeList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打印纸宽度：" prop="printWidth">
                <el-select class="form-item-input" v-model="params.printWidth" :disabled="disabledEdit">
                  <el-option v-for="item in printWidthList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="网络连接：" prop="connectionType">
                <el-select class="form-item-input" v-model="params.connectionType" :disabled="disabledEdit">
                  <el-option v-for="item in connectionTypeList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打印方式：" prop="printMode">
                <el-select class="form-item-input" v-model="params.printMode" :disabled="disabledEdit">
                  <el-option v-for="item in printModeList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否可切纸：" prop="withCut">
                <el-select class="form-item-input" v-model="params.withCut" :disabled="disabledEdit">
                  <el-option v-for="item in withCutList" :key="item.key" :value="item.key" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input v-model="params.remark" type="textarea" :rows="2"  :disabled="disabledEdit"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button v-if="!disabledEdit" type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { listPrinterEquipments,viewPrinterEquipment,modifyPrinterEquipment,addPrinterEquipment,delPrinterEquipment, changePrinterEquipmentStatus, listHardwareBrandsType, listHardwareBrandsMode, listEquipmentEnum } from '@/api/hardware'
export default {
  data() {
    return {
      title: '',
      dialogVisible: false,
      hardwareType: 2,
      disabledEdit: true,
      params: {
        name:'',
        brandCode:'',
        modelCode:'',
        type: '',
        printWidth:'',
        connectionType:'',
        printMode:'',
        withCut:'',
        remark:'',
      },
      rules:{},
      list: [],
      printerTypeList: [],
      brandsTypeList: [],
      brandModeList: [],
      printWidthList: [],
      connectionTypeList: [],
      printModeList: [],
      withCutList: [],
      codess: '',
      flag:true
    }
  },
  created() {
    this.getList()
    this.getHardwareBrandsTypeList(this.hardwareType)
    this.listAllEquipmentEnum()
  },
  methods: {
    getList1(){
      this.getList()
    },
    // 列表
    getList() {
      listPrinterEquipments({}).then(res =>{
        if(res){
          if(res.code){
            this.$message.error(`${res.msg}`);
          }else{
            this.list = res
          }
        }
      })
    },
    listAllEquipmentEnum(){
      this.listEquipmentEnum('printWidth')
      this.listEquipmentEnum('printerType')
      this.listEquipmentEnum('connectionType')
      this.listEquipmentEnum('printMode')
      this.listEquipmentEnum('withCut')
    },
    listEquipmentEnum(type){
      listEquipmentEnum(type).then(res =>{
        if(res){
          if(res.code){
            this.$message.error(`${res.msg}`);
          }else{
            if(type === 'printWidth'){
               this.printWidthList = res
            }else if(type === 'printerType'){
              this.printerTypeList = res               
            }else if(type === 'connectionType'){
              this.connectionTypeList = res
            }else if(type === 'printMode'){
              this.printModeList = res
            }else if(type === 'withCut'){
              this.withCutList = res
            }
          }
        }
      })
    },
    getHardwareBrandsTypeList(type){
      listHardwareBrandsType(type).then(res =>{
        if(res){
          if(res.code){
            this.$message.error(`${res.msg}`);
          }else{
            this.brandsTypeList = res
          }
        }
      })
    },
    getHardwareBrandsModeList(val){
      if(this.hardwareType == null || this.hardwareType == "undefined") {
        this.hardwareType = 2
      }
      this.params.modelCode = ''
      listHardwareBrandsMode({type:this.hardwareType, code:val}).then(res =>{
        if(res){
          if(res.code){
            this.$message.error(`${res.msg}`);
          }else{
            this.brandModeList = res
          }
        }
      })
    },
    // 删除
    delClick(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPrinterEquipment(id).then(res => {
          this.$message.success('删除成功!')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 新增 编辑
    openDialog(id, bool) {
      this.dialogVisible = true
      this.disabledEdit = bool
      if(id){
        this.flag = true
        viewPrinterEquipment(id).then(res =>{
          if(res){
            if(res.code){
              this.$message.error(`${res.msg}`);
            }else{
              this.params = res
            }
          }
        })
      }else{
        this.flag = false
        this.brandModeList = []
        Object.keys(this.params).forEach(key => this.params[key] = '')
      }
    },
    changeState(scope) {
      this.list[scope.seq - 1].publishStatus =
        scope.row.publishStatus === 1 ? 0 : 1
      changePrinterEquipmentStatus({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then((response) => {
        this.list[scope.seq - 1].publishStatus =
          scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.publishStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    },
    // 保存
    submit(){
      if(this.flag){
        modifyPrinterEquipment(this.params).then(res=>{
          if(res){
            if(res.code){
              this.$message.error(`${res.msg}`);
            }else{
              this.$message.success('修改成功!')
              this.getList()
              this.dialogVisible = false
            }
          }
        })
      }else{
        addPrinterEquipment(this.params).then(res=>{
          if(res){
            if(res.code){
              this.$message.error(`${res.msg}`);
            }else{
              this.$message.success('保存成功!')
              this.getList()
              this.dialogVisible = false
            }
          }
        })
      }
    }
  }
}
</script>

<style>
</style>
